<template>
  <div class="login">
    <!--浏览器兼容提示-->
    <div class="tip">
      <div class="warn">温馨提示：您当前的浏览器版本过低，请使用其他浏览器</div>
    </div>
    <div class="login-box">
      <h4 class="title">登&nbsp;&nbsp;录</h4>
      <div class="js-sign-in-container">
        <div class="form">
          <div class="username public">
            <input
              type="text"
              v-model.trim="phone"
              placeholder="请输入手机号"
              maxlength="11"
            />
            <i class="iconfont iconyunongtongqingshurushoujihaoma"></i>
          </div>
          <div class="password public">
            <input
              type="password"
              v-model.trim="password"
              placeholder="请输入密码"
            />
            <i class="iconfont iconmima1"></i>
          </div>
          <div class="verification-code">
            <input
              type="text"
              class="code"
              placeholder="验证码"
              @keyup.enter="loginRequest()"
              v-model.trim="validationCode"
            />
            <i class="iconfont iconcodev"></i>
            <img :src="img" alt="" class="code-img" @click="getImgCode()" />
          </div>
          <!-- <button class="sign-in-button" @click="loginRequest()">登录</button> -->

          <el-button
            type="primary"
            :loading="loading"
            class="sign-in-button"
            @click="loginRequest()"
            >登 录</el-button
          >

          <section class="reset-link-box">
            <!-- <span @click="register()">免费注册</span> -->
            <!-- <span class="forget-password" @click="forgetPasswordJump()"
              >忘记密码</span
            > -->
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import base from "@/assets/js/base";
import { requestApiPost, requestApiCodePost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "login",
  data() {
    return {
      validationCode: "",
      phone: "",
      password: "",
      img: "",
      loading: false,
    };
  },
  methods: {
    //登录
    loginRequest() {
      var reqData = {
        userName: this.phone,
        password: this.password,
        rand: this.validationCode,
        randImgReqSeq: sessionStorage.getItem("randImgReqSeq"),
      };
      this.loading = true;
      let reqReport = reqRep({ traCode: "_LOGIN_USER", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
          this.loading = false;
          this.getImgCode();
        } else {
          this.$message.success("登录成功");
          //登录判断
          //userId 1是平台管理员（所有权限），2､3是审核员，4-10是操作员，11及以上其它（个人）
          //userType 0-平台管理员，1-公司，2-个人，3-管理方，4-审核员，5-操作员

          //操作员负责新增修改信息，不能审核

          //审核员只负责审核信息和查询信息不能新增修改人员信息

          //KEY: 1=>A  2、3=>C  4-10=>O

          let url = "";
          let userName = "";

          switch (resReport.data.userType) {
            case "0":
              //平台管理员（所有权限）
              userName = "平台管理员";
              sessionStorage.setItem("KEY", "A");
              url = base.getMenu("admin")[0].url;
              break;
            case "1":
              //公司
              userName = "公司";
              sessionStorage.setItem("KEY", "company");
              url = base.getMenu("company")[0].url;
              break;
            case "2":
              //个人
              userName = "个人";
              sessionStorage.setItem("KEY", "personage");
              url = base.getMenu("user")[0].url;
              break;
            case "3":
              //平台管理员（所有权限）
              userName = "平台管理员";
              sessionStorage.setItem("KEY", "A");
              url = base.getMenu("admin")[0].url;
              break;
            case "4":
              //审核员
              userName = "审核员";
              sessionStorage.setItem("KEY", "C");
              url = base.getMenu("check")[0].url;
              break;
            case "5":
              //操作员
              userName = "操作员";
              sessionStorage.setItem("KEY", "O");
              url = base.getMenu("operator")[0].url;
              break;
          }
          resReport.data.userName = userName;
          sessionStorage.setItem("selectIndex", 0);
          sessionStorage.setItem("login", JSON.stringify(resReport.data));

          this.$router.push(url);
          this.loading = false;
        }
      });
    },
    forgetPasswordJump() {
      this.$router.push("forgetPassword");
    },
    register() {
      this.$router.push("register");
    },
    //获取图形验证码
    getImgCode() {
      var reqData = {};
      let reqReport = reqRep({ traCode: "", data: reqData });
      requestApiCodePost(reqReport).then((res) => {
        if (res.status == 200) {
          let dataStr = this.transformArrayBufferToBase64(res.data);
          this.img = "data:image/png;base64," + dataStr;
        } else {
          this.$message({
            message: res.statusText,
            type: "error",
          });
        }
      });
    },
    //文件流装换成base64
    transformArrayBufferToBase64(buffer) {
      var binary = "";
      var bytes = new Uint8Array(buffer);
      for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    },
  },
  created() {
    this.loading = false;
    sessionStorage.clear();
    this.getImgCode();
  },
  mounted() {
    var dom = document.querySelector(".tip");
    if (window.ActiveXObject != undefined) {
      dom.style.display = "block";
    } else {
      dom.style.display = "none";
    }
  },
};
</script>
<style scoped>
.login {
  min-height: 750px;
  min-width: 600px;
  font-size: 16px;
  overflow-x: auto;
  overflow-y: hidden;

  /* background-color: #f3f7f9; */
}
.login .top-title {
  padding-top: 100px;
  font-size: 50px;
  text-align: center;
  color: #fff;
  display: none;
}
.login .login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 370px;
  width: 440px;
  margin-top: -190px;
  margin-left: -220px;
  padding: 20px 50px 30px;
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.login .login-box .title {
  margin: 0 auto 20px;
  color: #333;
  padding: 10px;
  text-align: center;
  font-size: 20px;
}

.public {
  position: relative;
  width: 100%;
  height: 50px;
  margin-bottom: 12px;
  vertical-align: middle;
}
input {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 12px 4px 35px;
  border-radius: 4px;
  outline: none;
  background-color: #f3f7f9;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
i {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 18px;
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  color: #969696;
}
.login .verification-code {
  position: relative;
  margin-bottom: 12px;
  height: 50px;
}

.login .verification-code .code {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  padding: 0 10px 0 35px;
  border-radius: 4px;
}
.login .verification-code .code-img {
  position: absolute;
  right: 0;
  margin-left: 20px;
  width: 130px;
  height: 50px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fbfbfb;
}
.login .sign-in-button {
  line-height: 1.2;
  padding: 12px 20px;
  height: auto;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  display: block;
  color: #fff;
  background: #13cb6e;
  box-shadow: 0 3px 6px rgba(19, 203, 110, 0.25);
}
.reset-link-box {
  color: #13cb6e;
  margin-top: 18px;
}
.reset-link-box span {
  font-size: 14px;
  display: inline-block;
  width: 49%;
  cursor: pointer;
}
.forget-password {
  color: #999;
  text-align: right !important;
}
.tip {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
  background: #fff;
}
.tip .warn {
  margin: 100px auto;
  height: 100px;
  width: 900px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  line-height: 80px;
  background-image: url("../assets/img/bg_tip.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>

